<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useNotificationAPI } from "@/services/notification";

interface Report {
  id: number;
  title: string;
  context: string;
  uploadTime: string;
}

const notifications = ref<Report[]>([]);
const { getNewReport } = useNotificationAPI();

const fetchNotifications = async () => {
  try {
    const response = await getNewReport();
    if (response.code === 200) {
      notifications.value = response.data;
    }
  } catch (error) {
    console.error("获取通知失败:", error);
  }
};

onMounted(() => {
  fetchNotifications();
});
</script>

<template>
  <div class="max-w-3xl mx-auto py-6 px-4">
    <h1 class="text-xl font-medium text-gray-900 mb-6">通知中心</h1>

    <!-- 通知列表 -->
    <div class="space-y-3">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        class="p-4 bg-white border border-gray-100 rounded-md hover:border-gray-200 transition-colors"
      >
        <h3 class="text-base font-medium text-gray-800">
          {{ notification.title }}
        </h3>
        <p class="mt-2 text-sm text-gray-600">{{ notification.context }}</p>
        <div class="mt-2 text-xs text-gray-400">
          {{ new Date(notification.uploadTime).toLocaleString() }}
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div
      v-if="notifications.length === 0"
      class="text-center py-8 text-gray-500"
    >
      暂无通知
    </div>
  </div>
</template>

<style scoped>
.notification-enter-active,
.notification-leave-active {
  transition: all 0.2s ease;
}

.notification-enter-from,
.notification-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
